<template>
  <div class="container">
    <v-toolbar
      @ToggleSelection="toggleSelection"
      @ViewTheReport="viewTheReport"
    ></v-toolbar>
    <el-table
      :data="tableDatafn"
      border
      stripe
      style="width: 100%"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      @selection-change="handleSelectionChange"
      ref="multipleTable"
      tooltip-effect="dark"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <template v-for="item in dataBaseItem">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :fit="true"
          :key="item.ID"
          :sortable="item.sortable"
          align="center"
        >
          <template v-slot="scope">
            <template v-if="item.prop == 'REPORT'">
              <el-button type="primary" @click="serverDialog(scope.row)"
                >查看巡检报告</el-button
              >
            </template>
            <template v-else-if="item.prop == 'ALERT_LEVELCONFIG'">
              <div>
                {{ alertLevelConfigOptionText(scope.row[item.prop]) }}
              </div>
            </template>


            <template v-else>
              {{ scope.row[item.prop] }}
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <v-pagination
      :dataTotal="dataTotal"
      :curPage="postData.curPage"
      :pageSize="postData.pageSize"
      @getCurPage="getPaginationCurPage"
      @getPageSize="getPaginationPageSize"
    >
    </v-pagination>

    <v-Dialog
      @haldDialogfalse="haldDialogfalse"
      :dialogVisible="dialogVisible"
      itemType="Database"
      :dialogData="dialogServerItem"
      :title="'服务器运行报告'"
      :info="info"
      v-if="dialogIsExist"
    ></v-Dialog>
  </div>
</template>

<script>
import { submitAdmin, getManagementNodeOs } from "@/api/index.js";
import bus from "common/bus.js";
import vToolbar from "./TodayExamineToolbar";
import { serverItem, dataBaseItem } from "./dialogItem";
import vDialog from "./TodayExamineDialog";
import vPagination from "common/Pagination.vue";
import { Message } from 'element-ui';

export default {
  name: "report_server",
  components: {
    vToolbar,
    vDialog,
    vPagination,
  },

  data() {
    return {
      searchIP: "",
      dialogVisible: false,
      info: "",
      loading: false,
      dialogServerItem: [],
      barData: {
        searchIP: "",
        startTime: "2020-10-10 00:00:00",
        endTime: "2020-11-01 00:00:00",
      },

      postData: {
        opera: "GetDBMonitor",
        curPage: 1,
        pageSize: 20,
        sort: {
          sortColumn: "",
          sortOrders: "",
        },
        filtersType: "fuzzyquery",
        filters: {},
      },
      dataTotal: 0,

      serverItem: serverItem,
      dataBaseItem: dataBaseItem,
      routes: this.$route.path,
      tableData: [],
      dialogIsExist: true,
      multipleSelection: [],
      servicesNameOption:[]
    };
  },
  created() {
    this.getServicesNameOption()
    this.serverInfo();
  },
  computed: {
    tableDatafn() {
      return this.tableData.filter((item) => {
        return item;
      });
    },
  },
  
  filters:{
  
  },
  methods: {
    handleSearch(e) {
      this.barData.searchIP = e;
    },
    getServicesNameOption() {
      let _postData = {
        opera: "GetServicesName",
        curPage: 1,
        pageSize: 10000,
        sort: {
          sortColumn: "",
          sortOrders: "",
        },
        filtersType: "exactquery", // 精确查询
        filters: {},
      };

      submitAdmin({
        postData: JSON.stringify(_postData),
      }).then((res) => {
        this.servicesNameOption = res.data;
        
      });

      
    },
    async serverInfo() {
      let DBResultData = { dataTotal: "", data: [] },
        OSResultData = { dataTotal: "", data: [] },
        NetworkResultData = { dataTotal: "", data: [] };

      //获取数据库
      let DBPostData = {
        opera: "GetDBMonitor",
        curPage: 1,
        pageSize: 1000*1000*1000,
        sort: {
          sortColumn: "",
          sortOrders: "",
        },
        filtersType: "fuzzyquery",
        filters: {},
      };
      await submitAdmin({
        postData: JSON.stringify(DBPostData),
      }).then((res) => {
       
        DBResultData.data = res.data.filter(
          (item) => (item.ISENABLED = true)
        );
         DBResultData.dataTotal =  DBResultData.data.length;
      });

      // 获取网络设备
      let NetworkPostData = {
        opera: "GetHostMonitor",
        curPage: 1,
        pageSize: 1000*1000*1000,
        sort: {
          sortColumn: "",
          sortOrders: "",
        },
        filtersType: "fuzzyquery",
        filters: { OS_TYPE: "Network" },
      };

      await submitAdmin({
        postData: JSON.stringify(NetworkPostData),
      }).then((res) => {
        
        let filterData = [];
        res.data.forEach((_) => {
          filterData.push({
            IP: _.IP,
            SERVICESNAME: _.SERVICESNAME,
            DBTYPE: _.OS_TYPE,
            SYSTEMNAME: "无",
            ISENABLED: _.ISENABLED,
            ALERT_LEVELCONFIG: _.ALERT_LEVELCONFIG,
          });
        });
        
        NetworkResultData.data = filterData.filter(
          (item) => (item.ISENABLED = true)
        );

        NetworkResultData.dataTotal=NetworkResultData.data.length
      });

      //获取服务器
      await getManagementNodeOs({
        ip: "",
        ostpye: "",
        isenabled: "",
      }).then((res) => {
        

        let filterData = [];
        res.forEach((_) => {
          filterData.push({
            IP: _.ip,
            SERVICESNAME: _.servicesname,
            DBTYPE: _.os_TYPE,
            SYSTEMNAME: "无",
            ISENABLED: _.isenabled,
            ALERT_LEVELCONFIG: _.alert_LEVELCONFIG,
          });
        });
        OSResultData.data = filterData.filter(
          (item) => (item.ISENABLED = true)
        );
        OSResultData.dataTotal = OSResultData.data.length;
      });

      let TotalData = [
        ...DBResultData.data,
        ...OSResultData.data,
        ...NetworkResultData.data,
      ];


     
	


      this.dataTotal = Number(
        DBResultData.dataTotal) +Number(
          OSResultData.dataTotal) +Number(
          NetworkResultData.dataTotal);

	  let postData = {
          curPage: this.postData.curPage,
          pageSize: this.postData.pageSize,
          dataTotal: this.dataTotal,
        };
       

        this.$store.commit("ThisDayExamine/setItem", TotalData);
        this.$store.commit("ThisDayExamine/pagination", postData);
        this.tableData = this.$store.getters["ThisDayExamine/getItem"];
    },

    alertLevelConfigOptionText(id) {
      let _text = "";
      this.servicesNameOption.forEach((element) => {
        if (element.BID == id) {
          _text = element.NAME;
        }
      });

      return _text;
    },

    
   
    timeChange() {},
    timeProcess(time) {
      return moment(time).format("YYYY-MM-DD HH:mm:ss");
    },
    timer() {
      this.barData.startTime = this.timeProcess(this.barData.startTime);
      this.barData.endTime = this.timeProcess(this.barData.endTime);
    },
    timeIsChange(data) {
      this.barData.startTime = this.timeProcess(data.startTime);
      this.barData.endTime = this.timeProcess(data.endTime);
      
    },
    getChangeLie(val) {
      // 遍历表格列
      this.serverItem.map((item, index) => {
        // 列的显示隐藏状态改变
        item.isShow = val.includes(item.label);
      });
    },
    serverDialog(data) {
      this.dialogVisible = true;

      this.info = {
        ip: data.ip,
        type: data.type,
        time: this.barData.startTime,
        time2: this.barData.endTime,
        dbSid: data.dbSid,
      };
    },
    haldDialogfalse() {
      this.dialogVisible = false;

      this.initData();
    },
    getPaginationCurPage(val) {
      this.postData.curPage = val;

      this.serverInfo();
    },
    getPaginationPageSize(val) {
      // 分页大小改变之后，重置当前页码为 1
      this.postData.curPage = 1;
      this.postData.pageSize = val;

      this.serverInfo();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    viewTheReport() {
      if(this.multipleSelection.length==0){
        this.$message({
        type:"error",
        message:'请选择节点'
      })
      }else{
        this.$message({
        type:"warning",
        message:'开发中'
      })

      }
      
    },
  },
};
</script>

<style scoped>
.container {
  /* height: 100%; */
  color: aliceblue;
}
.toolBar {
  display: flex;
  margin-bottom: 14px;
}
.searchInput {
  width: 240px;
  margin-right: 10px;
}
/* .container .internetReport {
	height: calc(100% - 24px);
	display: flex;
	flex-direction: column;
	border: 1px solid rgb(236, 137, 137);
} */

.netContentRow {
  height: 100%;
  color: aliceblue;
}

.mainBox .columnBox {
  /* height: 30%; */
  margin-bottom: 10px;
}
.gradientBox {
  position: relative;
  padding: 7px 10px;
  overflow: hidden;
  text-align: center;
  border-radius: 5px;
  box-shadow: 0px 0px 24px rgb(72, 119, 128) inset !important;
}
.navigationBarText {
  color: crimson;
  font-size: large;
}
.gradientBox:last-child {
  margin-bottom: 0;
}
.titleText {
  width: 100%;
  font-size: x-large;
  text-align: center;
  color: mediumblue;
  background-color: mediumspringgreen;
}

/* 导航 */
.textNetBox > div {
  height: 100%;
}
/* 栏目框 */
.columnBox > div {
  height: 100%;
}
/* .textNetBox .gradientBox {
    max-height: calc(100% - 7px * 2);
} */
/* .topRow .gradientBox {
    height: calc(100% - 7px * 2);
} */
/* 中间部分 */
/* .midRow > div {
    height: 100%;
} */
/* .midRow .gradientBox {
    height: calc(100% - 7px * 2);
} */
/* 下部 */
/* .bottomRow > div {
    height: 100%;
} */
/* .bottomRow .gradientBox {
    height: calc(100% - 7px * 2);
} */
</style>
